<template>
	<view>
		<view class="u-flex u-flex-items-center" style="padding: 20rpx 0;">
			<view class="f-32 mr15" @tap="showPop = true" :style="'font-size:' + fontSize + 'rpx'">{{ '+' + areaNum }}</view>
			<u-icon name="arrow-right" class=" t-grey p120 u-font-xxl mr15"></u-icon>
			<u-input
				:customStyle="customStyle"
				:focus="focus"
				:fontSize="fontSize"
				:placeholder="placeholder"
				:placeholderStyle="placeholderStyle"
				type="number"
				border="none"
				v-model="mobile"
			></u-input>
		</view>
		<u-popup mode="bottom" @close="close" :show="showPop" >
			<view class="pd20 f-32 b-grey-light">选择国家和地区</view>
			<view class="flex flex-y">
				<view @tap="chooseArea(item.code)" class="mt20 ml20 pb20 border-b" v-for="(item, index) in areaItems" :key="index">{{ item.name + '(+' + item.code + ')' }}</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	name: 'lst-mobile-input',
	props: {
		placeholder: {
			type: [String],
			default: ''
		},
		placeholderStyle: {
			type: [String],
			default: ''
		},
		fontSize: {
			type: [Number],
			default: 30
		},
		customStyle: {
			type: Object,
			default: function() {}
		}
	},
	data: function() {
		return {
			focus: !1,
			showPop: !1,
			areaNum: 86,
			mobile: null,
			areaItems: []
		};
	},
	methods: {
		chooseArea: function(e) {
			// (this.areaNum = e), (this.showPop = !1), (this.focus = !0);
		},
		close() {
			this.showPop = false;
		}
	},
	watch: {
		areaNum: function() {
			var e = {};
			(e.areaNum = this.areaNum), (e.mobile = this.mobile), this.$emit('onChange', e);
		},
		mobile: function() {
			let { areaNum, mobile } = this;
			this.$emit('onChange', { areaNum, mobile });
		},
		'$store.getters.pthone_area_code': {
			handler: function(e) {
				this.areaItems = e || [];
			},
			deep: !0,
			immediate: !0
		}
	}
};
</script>

<style></style>
